<template>

  <div class="page">
    <mu-appbar :zDepth="0" class="header" :title="this.ui.bottomNav">
      <mu-icon-button icon="arrow_back_ios" slot="left" @click="goBack"/>
      <mu-icon-menu icon="more_vert" slot="right">
        <mu-menu-item title="菜单 1"/>
        <mu-menu-item title="菜单 2"/>
        <mu-menu-item title="菜单 3"/>
        <mu-menu-item title="菜单 4"/>
        <mu-menu-item title="菜单 5"/>
      </mu-icon-menu>
    </mu-appbar>
    <div class="content blueBg">
      <mu-list>
        <mu-sub-header>今天</mu-sub-header>
        <mu-list-item titleClass="white" title="这个周末一起吃饭么?">
          <mu-avatar
            src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=444031209,3209401621&fm=117&gp=0.jpg"
            slot="leftAvatar"/>
          <span slot="describe">
        <span style="color: rgba(0, 0, 0, .87)">Myron Liu -</span> 周末要来你这里出差，要不要一起吃个饭呀，实在编不下去了,哈哈哈哈哈哈
      </span>
          <mu-icon-menu slot="right" icon="more_vert" tooltip="操作">
            <mu-menu-item title="回复"/>
            <mu-menu-item title="标记"/>
            <mu-menu-item title="删除"/>
          </mu-icon-menu>
        </mu-list-item>
        <mu-divider inset/>
        <mu-list-item title="Alex Qin">
          <mu-avatar
            src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=444031209,3209401621&fm=117&gp=0.jpg"
            slot="leftAvatar"/>
          <span slot="describe">
        <span style="color: rgba(0, 0, 0, .87)">看电影啊</span> <br/>
        我们去看电影，最近有部烂片上映，又有吐槽的了
      </span>
          <mu-icon-menu slot="right" icon="more_vert" tooltip="操作">
            <mu-menu-item title="回复"/>
            <mu-menu-item title="标记"/>
            <mu-menu-item title="删除"/>
          </mu-icon-menu>
        </mu-list-item>
        <mu-divider inset/>
        <mu-list-item title="LOL" >
          <mu-avatar
            src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=444031209,3209401621&fm=117&gp=0.jpg"
            slot="leftAvatar"/>
          <span slot="describe">
        <span style="color: rgba(0, 0, 0, .87)">去打游戏啊</span><br/>
        周末一起 LOL
      </span>
          <mu-icon-menu slot="right" icon="more_vert" tooltip="操作">
            <mu-menu-item title="回复"/>
            <mu-menu-item title="标记"/>
            <mu-menu-item title="删除"/>
          </mu-icon-menu>
        </mu-list-item>
        <mu-divider inset/>
        <mu-list-item title="Myron Liu">
          <mu-avatar
            src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=444031209,3209401621&fm=117&gp=0.jpg"
            slot="leftAvatar"/>
          <span slot="describe">
        <span style="color: rgba(0, 0, 0, .87)">哇去</span><br/> 实在编不下去，这就是个demo
      </span>
          <mu-icon-menu slot="right" icon="more_vert" tooltip="操作">
            <mu-menu-item title="回复"/>
            <mu-menu-item title="标记"/>
            <mu-menu-item title="删除"/>
          </mu-icon-menu>
        </mu-list-item>
      </mu-list>
    </div>
    <mu-paper class="menu">
      <mu-bottom-nav :value="ui.bottomNav" @change="handleChange">
        <mu-bottom-nav-item value="recents" title="Recents" icon="restore"/>
        <mu-bottom-nav-item value="favorites" title="Favorites" icon="favorite"/>
        <mu-bottom-nav-item value="nearby" title="Nearby" icon="location_on"/>
      </mu-bottom-nav>
    </mu-paper>
  </div>

</template>

<script>
  export default{
    name: '',
    data(){
      return {
        ui: {
          bottomNav: 'recents'
        }
      }
    },
    methods: {
      handleChange (val) {
        this.ui.bottomNav = val
      },
      goBack(){
        this.$router.go(-1)
      }

    },
    beforeCreate(){

    },
    created(){

    },
    beforeUpdate(){

    },
    updated(){

    },
    beforeMount(){

    },
    mounted(){

    },
    beforeDestroy(){

    },
    destroyed(){

    },
    activated(){

    },
    deactivated(){

    }
  }


</script>

<style scoped>

  .header {
    width: 100%;
    position: fixed;
    top: 0px;
  }

  .main {
    width: 100%;
    height: 100%;
    position: fixed;
  }

  .menu {
    width: 100%;
    position: fixed;
    bottom: 0px;
  }

  .content {
    position: fixed;
    top: 56px;
    width: 100%;
    height: calc(100% - 56px - 56px);
  }

</style>
